<template>
  <!-- 基础信息 -->
  <div class="baseInf">
    <a-divider orientation="left" :dashed="true" style="font-size: 20px"
      >基础信息</a-divider
    >
    <!--  <p class="title">基础信息</p> -->
    <div>
      <a-flex wrap="wrap" gap="small">
        <div class="infItem">
          电池堆状态：<span
            :style="{
              color:
                inf.lineStatus === 1
                  ? 'greenyellow'
                  : inf.lineStatus === 0
                  ? 'red'
                  : '#fff',
            }"
            >{{
              {
                0: "● 离线",
                1: "● 在线",
                3: "--",
              }[inf.lineStatus]
            }}{{
          }}</span>
        </div>

        <div class="infItem">
          <a-tooltip>
            <template #title>{{ inf.supplierShortName }}</template>
            厂商：<span class="supplierName">{{ inf.supplierShortName }}</span>
          </a-tooltip>
        </div>
        <div class="infItem">型号：{{ inf.typeName }}</div>
        <div class="infItem">
          是否为主电池堆：{{
            {
              0: "否",
              1: "是",
            }[inf.isMain]
          }}
        </div>
      </a-flex>
    </div>
    <!--  <div class="baseInf">
      <div class="infItem">
        电池堆状态：<span
          :style="{
            color:
              inf.lineStatus === 1
                ? 'greenyellow'
                : inf.lineStatus === 0
                ? 'red'
                : '#fff',
          }"
          >{{
            {
              0: "● 离线",
              1: "● 在线",
              3: "--",
            }[inf.lineStatus]
          }}{{
        }}</span>
      </div>
      <div class="infItem">厂商：{{ inf.supplierShortName }}</div>
      <div class="infItem">型号：{{ inf.typeName }}</div>
      <div class="infItem">
        是否为主电池堆：{{
          {
            0: "否",
            1: "是",
          }[inf.isMain]
        }}
      </div>
    </div> -->
  </div>
</template>

<script setup>

const $api = inject("$api")

const props = defineProps({
  baseInf: {
    type: Object,
    default: {
      isMain: "--",
      lineStatus: 3,
      supplierShortName: "--",
      typeName: "--",
    },
  },
})
const inf = ref({})
watch(
  () => props.baseInf,
  async (val) => {
    if (val) {
      inf.value = val
    }
  },
  { deep: true }
)
</script>

<style lang="less" scoped>
.baseInf {
  .title {
    font-size: 22px;
  }
  .baseInf {
    display: flex;
    margin-top: 20px;
  }
  .infItem {
    flex: 1;

    .supplierName {
      width: 80%;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
    }
  }
}
</style>
